$(function() {
	
	//$( ".metro-menu" ).css("height",$( "html" ).css("height"));
	//$( ".body" ).css("height",$( "html" ).css("height"));
	/**************************************************************/
	
	  $( "#btnShowHide" ).button({ icons: { primary: "metro-icon-hide" }, text: false })
	  .click(function() {
		  wrapper = $(".wrapper").css("width");
		  wrapper = wrapper.substring(0,wrapper.length-2);
		  
		  menu = $(".metro-menu").css("width");
		  menu = menu.substring(0,menu.length-2);
		  
		  percent = ( menu/wrapper*100 ).toPrecision(2);
		  
		  //alert("percent: "+percent);
		  
		  if( percent == "20"){
			  // ====== Hide ======
			  $(".body").animate({
				  "width": "94.5%"
			  },500);
			  $(".body-background").animate({
				  "width": "77.2%",
				  "margin-left": "4.4%"
			  },500);
			  $(".metro-title").animate({
				  "width": "75.6%"
			  },500);			  
			  $(".metro-menu").animate({
				  "width": "3.8%"
			  },500,function(){
				  $( "#btnShowHide" ).button({ icons: { primary: "metro-icon-show" },text: false });
				  updateButtonShowHide();
			  });
			  $(".metro-menu").children(".line").find("a").button({text: false});
		  }else{
			// ====== Show ======
			  $(".body").animate({
				  "width": "79.4%"
			  },500);
			  $(".body-background").animate({
				  "width": "65%",
				  "margin-left": "16.5%"
			  },500);
			  $(".metro-title").animate({
				  "width": "63.5%"
			  },500);
			  $(".metro-menu").animate({
				  "width": "16%"
			  },500,function(){
				  $(this).children(".line").find("a").button({text: true});
				  $( "#btnShowHide" ).button({ icons: { primary: "metro-icon-hide" }, text: false });
				  updateButtonShowHide();
			  });
		  }
	  });
	  
	  $( "#btnLogin" ).button({ icons: { primary: "metro-icon-person" }})
	  .click(function() {
		  $( "#dialog-login" ).dialog( "open" );
      });
	  $( "#btnEnter" ).button({ icons: { primary: "metro-icon-person" }});
	  $( "#btnBack" ).button({ icons: { primary: "ui-icon-arrowthick-1-w" }});
	  
	  $( "#btnMHome" ).button({ icons: { primary: "metro-icon-home" } });
	  $( "#btnM1" ).button({ icons: { primary: "metro-icon-person-add" } });
	  $( "#btnM2" ).button({ icons: { primary: "metro-icon-offers" } });
	  $( "#btnM3" ).button({ icons: { primary: "metro-icon-offers" } });
	  $( "#btnM4" ).button({ icons: { primary: "metro-icon-postulants" } });
	  $( "#btnM5" ).button({ icons: { primary: "metro-icon-file" } });
	  
	  function updateButtonShowHide() {
		  $( "#btnShowHide" ).button()
	        .addClass( "ui-state-hover" );
	      setTimeout(function() {
	    	  $( "#btnShowHide" ).button().removeClass( "ui-state-hover", 1500 );
	      }, 500 );
	    }
	  $( "#dialog-login" ).dialog({
	      autoOpen: false,
	      height: 300,
	      width: 350,
	      modal: true
	  });
	  
	/**************************************************************/	
	
	$("div.ui-overlay").hover(function(){
		$(this).finish().animate({
			"background-position-y": "50%",
			"background-color": "rgba(0,0,0,0.3)"
		},100);
		var v_height = $(this).parent(".ui-wrapper-img").find("img").css("height");
		v_height = v_height.substring(0,v_height.length-2)*1;
		//alert("v_height: "+v_height);
		$(this).parent(".ui-wrapper-img").find("img").finish().animate({
			width: "120%",
			"height": v_height*1.2, 
			"margin-left": "-10%"
		},500);
	},function(){
		$(this).finish().animate({
			"background-position-y": "130%",
			"background-color": "rgba(0,0,0,0)"
		},300);
		var v_height = $(this).parent(".ui-wrapper-img").find("img").css("height");
		v_height = v_height.substring(0,v_height.length-2)*1;
		//alert("v_height: "+v_height);
		$(this).parent(".ui-wrapper-img").find("img").finish().animate({
			width: "100%",
			"height": v_height*5/6,
			"margin-left": "0px"
		},300);
	}
	);
	
	/**************************************************************/
});